<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>打印模板预览</title>
    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
    <style>
        .template-preview {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        .preview-toolbar {
            padding: 10px;
            background-color: #f2f2f2;
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .preview-content {
            flex: 1;
            overflow: auto;
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .preview-paper {
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: center;
            cursor: grab;
            will-change: transform;
        }

        .preview-paper:active {
            cursor: grabbing;
        }

        .preview-element {
            position: absolute;
            pointer-events: none;
        }

        .zoom-controls {
            display: flex;
            align-items: center;
        }

        .zoom-text {
            margin: 0 10px;
        }
    </style>
</head>

<body class="childrenBody">
    <div class="template-preview">
        <div class="preview-toolbar">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm" id="printBtn">
                    <i class="layui-icon layui-icon-print"></i> 打印
                </button>
                <button type="button" class="layui-btn layui-btn-sm" id="exportPdfBtn">
                    <i class="layui-icon layui-icon-file-pdf"></i> 导出PDF
                </button>
            </div>

            <div class="zoom-controls">
                <button type="button" class="layui-btn layui-btn-sm" id="zoomOutBtn">
                    <i class="layui-icon layui-icon-subtraction"></i>
                </button>
                <span id="scaleText" class="zoom-text">50%</span>
                <button type="button" class="layui-btn layui-btn-sm" id="zoomInBtn">
                    <i class="layui-icon layui-icon-addition"></i>
                </button>
            </div>
        </div>

        <div class="preview-content" id="previewContent">
            <div class="preview-paper" id="paper">
                <!-- 预览内容将动态生成 -->
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../../assets/lib/layui/layui.js"></script>
    <script type="text/javascript" src="../../assets/lib/layui/custom.js"></script>
    <script type="text/javascript" src="../../assets/html2canvas/js/html2canvas.min.js"></script>
    <script type="text/javascript" src="../../assets/html2canvas/js/jspdf.min.js"></script>

    <script>
        // 模板数据
        var templateData = null;
        var businessData = {};
        var scale = 0.5;
        var minScale = 0.1;
        var maxScale = 3;
        var scaleStep = 0.1;
        var paperSizeMap = {
            'A3_PAGE': { width: 297, height: 420 },
            'A4_PAGE': { width: 210, height: 297 },
            'A5_PAGE': { width: 148, height: 210 },
            'LETTER_PAGE': { width: 215.9, height: 279.4 },
            'CUSTOM_PAGE': { width: 210, height: 297 }
        };

        // 拖动和位置相关变量
        var isDragging = false;
        var dragStartX = 0;
        var dragStartY = 0;
        var translateX = 0;
        var translateY = 0;

        // 加载模板数据
        function loadTemplateData() {
            // 获取模板信息
            var templateId = GetUrlParam("id");

            // 判断是否有业务数据参数
            businessData = parent.businessData || {};

            // 准备请求参数
            var params = {
                id: templateId
            };

            // 如果有业务数据，加入请求
            if (Object.keys(businessData).length > 0) {
                params.businessData = JSON.stringify(businessData);
            }

            // 从服务器获取模板数据
            AjaxPostUtil.request({
                url: reqBasePath + 'queryPreviewPrintTemplateById',
                params: params,
                type: 'json',
                method: 'POST',
                callback: function (json) {
                    // 存储模板信息
                    templateData = json.bean.template;

                    // 如果有预览HTML，可以使用它
                    // previewHtml = json.bean.previewHtml;

                    // 渲染模板
                    renderTemplate();
                },
                errorCallback: function (error) {
                    console.error('加载模板数据失败:', error);
                    layer.msg('加载模板数据失败', { icon: 5 });
                }
            });
        }

        // 渲染模板
        function renderTemplate() {
            // 设置纸张尺寸和方向
            updatePaperSize();

            // 渲染元素
            renderElements();

            // 初始化位置
            translateY = 100;

            // 更新缩放和位置
            updateZoom();
        }

        // 更新纸张尺寸
        function updatePaperSize() {
            // 获取纸张尺寸
            var paperSize = paperSizeMap[templateData.paperSize];

            // 如果是自定义纸张大小
            if (templateData.paperSize === 'CUSTOM_PAGE') {
                paperSize = {
                    width: templateData.width,
                    height: templateData.height
                };
            }

            // 考虑方向
            var width = paperSize.width;
            var height = paperSize.height;

            if (templateData.orientation === 'landscape') {
                width = paperSize.height;
                height = paperSize.width;
            }

            // 获取边距
            var margin = { top: 10, right: 10, bottom: 10, left: 10 };

            if (templateData.margin) {
                try {
                    margin = JSON.parse(templateData.margin);
                } catch (e) {
                    console.error('解析边距数据失败', e);
                }
            }

            // 将mm转换为px (1mm ≈ 3.78px)
            var widthPx = Math.round(width * 3.78);
            var heightPx = Math.round(height * 3.78);

            // 设置纸张尺寸
            $('#paper').css({
                width: widthPx + 'px',
                height: heightPx + 'px',
                padding: Math.round(margin.top * 3.78) + 'px ' +
                    Math.round(margin.right * 3.78) + 'px ' +
                    Math.round(margin.bottom * 3.78) + 'px ' +
                    Math.round(margin.left * 3.78) + 'px'
            });
        }

        // 渲染元素
        function renderElements() {
            var paperElement = $('#paper');

            // 清空现有元素
            paperElement.empty();

            // 获取元素数据
            var elements = [];

            if (templateData.configContent) {
                try {
                    const content = JSON.parse(templateData.configContent)
                    elements = content.elements || []
                } catch (e) {
                    console.error('解析元素数据失败', e);
                    return;
                }
            }

            // 渲染所有元素
            $.each(elements, function (index, element) {
                renderElement(element);
            });
        }

        // 渲染单个元素
        function renderElement(element) {
            var paperElement = $('#paper');

            // 创建元素容器
            var elementHtml = '<div id="' + element.id + '" class="preview-element" style="' + getElementStyle(element) + '">';

            // 元素内容
            switch (element.type) {
                case 'text':
                    elementHtml += '<div style="' + getContentStyle(element) + '">' + replaceVariables(element.content || '') + '</div>';
                    break;
                case 'image':
                    var imgStyle = 'width: 100%; height: 100%; object-fit: ' + (element.objectFit || 'contain') + ';';
                    if (element.border) {
                        imgStyle += ' border: ' + element.border + ';';
                    }
                    elementHtml += '<img src="' + (element.src || '') + '" style="' + imgStyle + '" alt="图片" onerror="this.src=\'data:image/svg+xml;utf8,<svg xmlns=\\\'http://www.w3.org/2000/svg\\\' width=\\\'24\\\' height=\\\'24\\\' viewBox=\\\'0 0 24 24\\\'><path fill=\\\'%23ddd\\\' d=\\\'M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\\\'/></svg>\'">';
                    break;
                case 'table':
                    elementHtml += renderTableContent(element);
                    break;
                case 'barcode':
                    elementHtml += '<div class="barcode-container" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
                    // 这里可以添加实际条形码渲染
                    elementHtml += '<div style="font-size: 12px; margin-top: 4px;">' + replaceVariables(element.content || 'BARCODE') + '</div>';
                    elementHtml += '</div>';
                    break;
                case 'qrcode':
                    elementHtml += '<div class="qrcode-container" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
                    // 这里可以添加实际二维码渲染
                    elementHtml += '<div style="font-size: 12px; margin-top: 4px;">' + replaceVariables(element.content || 'QRCODE') + '</div>';
                    elementHtml += '</div>';
                    break;
                case 'line':
                    elementHtml += '<hr style="width: 100%; border-top: ' + (element.lineWidth || 1) + 'px ' + (element.lineStyle || 'solid') + ' ' + (element.color || '#000') + ';">';
                    break;
                case 'rect':
                    // 矩形元素不需要额外内容
                    break;
                case 'circle':
                    // 已经通过CSS样式设置圆形
                    break;
                default:
                    elementHtml += '<div style="' + getContentStyle(element) + '">未知元素类型: ' + element.type + '</div>';
            }

            elementHtml += '</div>';

            // 添加到纸张中
            paperElement.append(elementHtml);
        }

        // 获取元素样式
        function getElementStyle(element) {
            var style = 'position: absolute; ';

            // 基本位置和尺寸
            style += 'left: ' + element.x + 'px; ';
            style += 'top: ' + element.y + 'px; ';
            style += 'width: ' + element.width + 'px; ';
            style += 'height: ' + element.height + 'px; ';

            // 旋转
            if (element.rotate) {
                style += 'transform: rotate(' + element.rotate + 'deg); ';
                style += 'transform-origin: ' + (element.transformOrigin || 'center') + '; ';
            }

            // 透明度
            if (element.opacity !== undefined && element.opacity !== 100) {
                style += 'opacity: ' + (element.opacity / 100) + '; ';
            }

            // 背景颜色
            style += 'background-color: ' + (element.backgroundColor || 'transparent') + '; ';

            // 指针事件
            style += 'pointer-events: none; ';

            // 用户选择
            style += 'user-select: none; ';

            // 边框
            if (element.borderStyle && element.borderStyle !== 'none') {
                style += 'border-style: ' + element.borderStyle + '; ';
                style += 'border-width: ' + (element.borderWidth || 1) + 'px; ';
                style += 'border-color: ' + (element.borderColor || '#d9d9d9') + '; ';
            }

            // 圆角
            if (element.borderRadius) {
                style += 'border-radius: ' + element.borderRadius + (element.borderRadiusUnit || 'px') + '; ';
            }

            // 如果是圆形
            if (element.type === 'circle') {
                style += 'border-radius: 50%; ';
            }

            // 阴影
            if (element.shadow && element.shadow.enabled) {
                style += 'box-shadow: ' + element.shadow.x + 'px ' + element.shadow.y + 'px ' + element.shadow.blur + 'px ' + element.shadow.color + '; ';
            }

            return style;
        }

        // 获取内容样式
        function getContentStyle(element) {
            var style = 'width: 100%; height: 100%; ';

            // 添加Flex布局使内容居中
            style += 'display: flex; ';
            style += 'align-items: center; ';

            // 根据对齐方式设置水平对齐
            if (element.align === 'center' || element.textAlign === 'center') {
                style += 'justify-content: center; ';
            } else {
                style += 'justify-content: flex-start; ';
            }

            style += 'padding: 4px; ';

            // 文本样式
            style += 'font-size: ' + (element.fontSize || 14) + 'px; ';
            style += 'text-align: ' + (element.align || element.textAlign || 'left') + '; ';

            // 字体粗细
            if (element.bold) {
                style += 'font-weight: bold; ';
            } else if (element.fontWeight) {
                style += 'font-weight: ' + element.fontWeight + '; ';
            } else {
                style += 'font-weight: normal; ';
            }

            // 字体样式
            if (element.italic) {
                style += 'font-style: italic; ';
            } else if (element.fontStyle) {
                style += 'font-style: ' + element.fontStyle + '; ';
            } else {
                style += 'font-style: normal; ';
            }

            // 下划线
            if (element.underline) {
                style += 'text-decoration: underline; ';
            } else {
                style += 'text-decoration: none; ';
            }

            // 文字颜色
            if (element.color) {
                style += 'color: ' + element.color + '; ';
            }

            // 行高
            if (element.lineHeight) {
                style += 'line-height: ' + element.lineHeight + '; ';
            } else {
                style += 'line-height: 1.5; ';
            }

            return style;
        }

        // 渲染表格内容
        function renderTableContent(element) {
            var tableStyle = 'width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed;';
            var borderColor = element.borderColor || '#d9d9d9';
            var borderWidth = element.borderWidth || 1;
            var borderStyle = element.borderStyle || 'solid';
            var cellPadding = element.cellPadding || 5;
            var fontSize = element.fontSize || 12;

            var html = '<table style="' + tableStyle + '">';

            // 表头
            if (element.header && element.header.length > 0) {
                html += '<thead><tr>';

                for (var i = 0; i < element.header.length; i++) {
                    var column = element.header[i];
                    var thStyle = 'border: ' + borderWidth + 'px ' + borderStyle + ' ' + borderColor + '; ' +
                        'padding: ' + cellPadding + 'px; ' +
                        'background-color: ' + (element.headerBgColor || '#f5f5f5') + '; ' +
                        'font-weight: bold; ' +
                        'font-size: ' + fontSize + 'px; ' +
                        'text-align: ' + (column.align || 'center') + ';';

                    // 列宽
                    if (column.width) {
                        thStyle += 'width: ' + column.width + 'px;';
                    }

                    html += '<th style="' + thStyle + '">' + (column.title || '') + '</th>';
                }

                html += '</tr></thead>';
            }

            // 表体（预览数据）
            html += '<tbody>';
            var rowCount = element.previewRowCount || 3;
            var columnsCount = element.header ? element.header.length : 3;

            for (var r = 0; r < rowCount; r++) {
                html += '<tr>';

                for (var c = 0; c < columnsCount; c++) {
                    var column = element.header ? element.header[c] : null;
                    var align = column && column.align ? column.align : 'left';

                    var tdStyle = 'border: ' + borderWidth + 'px ' + borderStyle + ' ' + borderColor + '; ' +
                        'padding: ' + cellPadding + 'px; ' +
                        'font-size: ' + fontSize + 'px; ' +
                        'text-align: ' + align + ';';

                    // 奇偶行样式
                    if (r % 2 === 1 && element.oddEvenColor) {
                        tdStyle += 'background-color: ' + element.oddEvenColor + ';';
                    }

                    html += '<td style="' + tdStyle + '">数据' + (r + 1) + '-' + (c + 1) + '</td>';
                }

                html += '</tr>';
            }

            html += '</tbody></table>';

            return html;
        }

        // 替换变量
        function replaceVariables(content) {
            if (!content || typeof content !== 'string') return content;

            return content.replace(/\${([\w.]+)}/g, function (match, path) {
                var value = path.split('.').reduce(function (obj, key) {
                    return obj && obj[key];
                }, businessData);

                // 支持日期格式化和数字格式化
                if (value !== undefined) {
                    // 如果是日期对象，格式化为 YYYY-MM-DD
                    if (value instanceof Date) {
                        return formatDate(value);
                    }

                    // 如果是数字，保留小数位
                    if (typeof value === 'number') {
                        // 如果是整数，保持原样，否则保留2位小数
                        return Number.isInteger(value) ? value : value.toFixed(2);
                    }

                    return value;
                }

                return match;
            });
        }

        // 日期格式化辅助函数
        function formatDate(date) {
            var year = date.getFullYear();
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);
            return year + '-' + month + '-' + day;
        }

        // 初始化事件
        function initEvents() {
            // 打印按钮点击事件
            $('#printBtn').on('click', function () {
                printTemplate();
            });

            // 导出PDF按钮点击事件
            $('#exportPdfBtn').on('click', function () {
                exportPDF();
            });

            // 缩放按钮点击事件
            $('#zoomInBtn').on('click', function () {
                zoomIn();
            });

            $('#zoomOutBtn').on('click', function () {
                zoomOut();
            });

            // 鼠标滚轮缩放
            $('#previewContent').on('wheel', function (e) {
                if (e.ctrlKey) {
                    e.preventDefault();

                    if (e.originalEvent.deltaY < 0) {
                        zoomIn();
                    } else {
                        zoomOut();
                    }
                }
            });

            // 拖动预览
            $('#paper').on('mousedown', function (e) {
                if (e.button !== 0) return; // 只响应左键
                isDragging = true;
                dragStartX = e.clientX - translateX;
                dragStartY = e.clientY - translateY;
                $(this).css('cursor', 'grabbing');
            });

            $(document).on('mousemove', function (e) {
                if (!isDragging) return;

                translateX = e.clientX - dragStartX;
                translateY = e.clientY - dragStartY;

                // 更新位置
                updateZoom();
            });

            $(document).on('mouseup', function () {
                if (isDragging) {
                    isDragging = false;
                    $('#paper').css('cursor', 'grab');
                }
            });
        }

        // 缩放函数
        function zoomIn() {
            if (scale < maxScale) {
                scale += scaleStep;
                updateZoom();
            }
        }

        function zoomOut() {
            if (scale > minScale) {
                scale -= scaleStep;
                updateZoom();
            }
        }

        function updateZoom() {
            // 更新缩放文本
            $('#scaleText').text(Math.round(scale * 100) + '%');

            // 更新纸张缩放和位置
            $('#paper').css({
                transform: 'translate(-50%, -50%) translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scale + ')'
            });
        }

        // 打印模板
        function printTemplate() {
            // 获取纸张尺寸（毫米）
            var paperWidth = '210mm';
            var paperHeight = '297mm';

            var paperSize = paperSizeMap[templateData.paperSize];

            // 如果是自定义纸张大小
            if (templateData.paperSize === 'CUSTOM_PAGE') {
                paperWidth = templateData.width + 'mm';
                paperHeight = templateData.height + 'mm';
            } else if (paperSize) {
                paperWidth = paperSize.width + 'mm';
                paperHeight = paperSize.height + 'mm';
            }

            // 考虑方向
            if (templateData.orientation === 'landscape') {
                var temp = paperWidth;
                paperWidth = paperHeight;
                paperHeight = temp;
            }

            // 获取边距
            var margin = { top: 10, right: 10, bottom: 10, left: 10 };
            if (templateData.margin) {
                try {
                    margin = JSON.parse(templateData.margin);
                } catch (e) {
                    console.error('解析边距数据失败', e);
                }
            }

            // 创建打印窗口
            var printWindow = window.open('', '_blank');

            var htmlContent = '<!DOCTYPE html>' +
                '<html>' +
                '<head>' +
                '<meta charset="utf-8">' +
                '<title>打印 - ' + (templateData.name || '打印模板') + '</title>' +
                '<style>' +
                '@page {' +
                'size: ' + paperWidth + ' ' + paperHeight + ' !important;' +
                'margin: 0;' +
                '}' +
                'html, body {' +
                'margin: 0;' +
                'padding: 0;' +
                'width: 100%;' +
                'height: 100%;' +
                '}' +
                'body {' +
                'display: flex;' +
                'justify-content: center;' +
                'align-items: center;' +
                '}' +
                '.print-container {' +
                'width: ' + paperWidth + ';' +
                'min-height: ' + paperHeight + ';' +
                'max-height: ' + paperHeight + ';' +
                'position: relative;' +
                'box-sizing: border-box;' +
                'padding: ' + margin.top + 'mm ' + margin.right + 'mm ' + margin.bottom + 'mm ' + margin.left + 'mm;' +
                'background-color: white;' +
                'overflow: hidden;' +
                '}' +
                '@media print {' +
                '  body { background: none; }' +
                '  .print-container { box-shadow: none; }' +
                '}' +
                // 复制元素样式
                '.preview-element {' +
                'position: absolute;' +
                'pointer-events: none;' +
                '}' +
                '</style>' +
                '</head>' +
                '<body>' +
                '<div class="print-container">';

            // 克隆纸张元素并移除变换样式
            var $paper = $('#paper');
            var $clonedPaper = $paper.clone();

            // 移除不需要的属性
            $clonedPaper.css({
                transform: 'none',
                position: 'static',
                left: 'auto',
                top: 'auto',
                width: '100%',
                height: '100%',
                padding: '0',
                margin: '0',
                boxShadow: 'none'
            });

            // 移除纸张容器的类以避免样式冲突
            $clonedPaper.removeClass('preview-paper');
            $clonedPaper.attr('id', 'print-content');

            // 将克隆的内容添加到打印页面
            htmlContent += $clonedPaper.html();

            htmlContent += '</div>' +
                '<scr' + 'ipt>' +
                'function waitForImages() {' +
                '  return new Promise((resolve) => {' +
                '    const images = document.getElementsByTagName("img");' +
                '    let loadedImages = 0;' +
                '    const totalImages = images.length;' +
                '    if (totalImages === 0) resolve();' +
                '    for (let i = 0; i < totalImages; i++) {' +
                '      if (images[i].complete) {' +
                '        loadedImages++;' +
                '        if (loadedImages === totalImages) resolve();' +
                '      } else {' +
                '        images[i].onload = images[i].onerror = () => {' +
                '          loadedImages++;' +
                '          if (loadedImages === totalImages) resolve();' +
                '        };' +
                '      }' +
                '    }' +
                '  });' +
                '}' +
                'window.onload = async function() {' +
                '  try {' +
                '    await waitForImages();' +
                '    window.focus();' +
                '    const mediaQueryList = window.matchMedia("print");' +
                '    mediaQueryList.addEventListener("change", function(mql) {' +
                '      if (!mql.matches) {' +
                '        setTimeout(() => window.close(), 500);' +
                '      }' +
                '    });' +
                '    setTimeout(() => {' +
                '      window.print();' +
                '    }, 500);' +
                '  } catch (error) {' +
                '    console.error("打印准备过程出错:", error);' +
                '  }' +
                '};' +
                '</scr' + 'ipt>' +
                '</body>' +
                '</html>';

            printWindow.document.write(htmlContent);
            printWindow.document.close();
        }

        // 导出PDF
        function exportPDF() {
            try {
                // 准备POST数据
                var businessDataStr = Object.keys(businessData).length > 0 ? JSON.stringify(businessData) : null;
                var templateDataObj = {
                    id: GetUrlParam("id")
                };
                if (businessDataStr) {
                    templateDataObj.businessData = businessDataStr
                }

                // 使用服务端API导出PDF
                AjaxPostUtil.request({
                    url: reqBasePath + 'generatePdfPrintTemplateById',
                    params: templateDataObj,
                    type: 'blob',
                    method: 'POST',
                    callback: function (response) {
                        // 创建blob并下载
                        var blob = new Blob([response.data], { type: 'application/pdf' });
                        var url = window.URL.createObjectURL(blob);
                        var link = document.createElement('a');
                        link.href = url;
                        link.download = (templateData.name || '打印模板') + '.pdf';
                        link.click();
                        window.URL.revokeObjectURL(url);
                    },
                    errorCallback: function (error) {
                        console.error('导出PDF失败:', error);
                        layer.msg('导出PDF失败', { icon: 5 });
                    }
                });
            } catch (error) {
                console.error('导出PDF失败:', error);
                layer.msg('导出PDF失败', { icon: 5 });

                // 备用方案：如果服务端导出失败，使用客户端导出
                clientSidePdfExport();
            }
        }

        // 客户端PDF导出备用方案
        function clientSidePdfExport() {
            var $paper = $('#paper');
            var originalTransform = $paper.css('transform');
            var originalPosition = $paper.css('position');
            var originalLeft = $paper.css('left');
            var originalTop = $paper.css('top');

            $paper.css({
                transform: 'none',
                position: 'relative',
                left: 'auto',
                top: 'auto'
            });

            // 获取纸张尺寸
            var paperSize = paperSizeMap[templateData.paperSize];

            // 如果是自定义纸张大小
            if (templateData.paperSize === 'CUSTOM_PAGE') {
                paperSize = {
                    width: templateData.width,
                    height: templateData.height
                };
            }

            // 考虑方向
            var width = paperSize.width;
            var height = paperSize.height;

            if (templateData.orientation === 'landscape') {
                width = paperSize.height;
                height = paperSize.width;
            }

            // 使用html2canvas捕获页面
            html2canvas($paper[0], {
                scale: 2, // 提高输出质量
                useCORS: true,
                allowTaint: true,
                backgroundColor: '#ffffff'
            }).then(function (canvas) {
                try {
                    // 创建PDF
                    var pdf;

                    if (templateData.orientation === 'landscape') {
                        pdf = new jsPDF('l', 'mm', [width, height]);
                    } else {
                        pdf = new jsPDF('p', 'mm', [width, height]);
                    }

                    // 将canvas转换为图片
                    var imgData = canvas.toDataURL('image/jpeg', 1.0);

                    // 添加到PDF
                    pdf.addImage(imgData, 'JPEG', 0, 0, width, height);

                    // 保存PDF
                    pdf.save('打印模板_' + (templateData.name || '打印模板') + '.pdf');
                } catch (e) {
                    console.error('客户端PDF生成失败:', e);
                    layer.msg('PDF生成失败', { icon: 5 });
                } finally {
                    // 恢复缩放和位置
                    $paper.css({
                        transform: originalTransform,
                        position: originalPosition,
                        left: originalLeft,
                        top: originalTop
                    });
                }
            }).catch(function (error) {
                console.error('Canvas生成失败:', error);
                layer.msg('PDF生成失败', { icon: 5 });

                // 恢复缩放和位置
                $paper.css({
                    transform: originalTransform,
                    position: originalPosition,
                    left: originalLeft,
                    top: originalTop
                });
            });
        }

        // 获取URL参数
        function getURLParameter(name) {
            var url = window.location.search.substring(1);
            var vars = url.split('&');

            for (var i = 0; i < vars.length; i++) {
                var param = vars[i].split('=');

                if (param[0] === name) {
                    return decodeURIComponent(param[1]);
                }
            }

            return null;
        }

        // 页面加载完成后初始化
        layui.use(['layer'], function () {
            // 加载模板数据
            loadTemplateData();

            // 初始化事件
            initEvents();
        });
    </script>
</body>

</html>